<template>
  <div class="honor_box">
    <div class="title_box">
      <div class="honor_box_main_select">
        <div class="left-box">
          <!-- 季度筛选框 -->
          <el-select
            v-model="itemOne"
            value-key="name"
            placeholder="请选择"
            class="li_quarter li_item"
            size="small"
            @change="changeQuater()">
            <el-option v-for="item in quarterOption" :key="item.name" :label="item.name" :value="item"></el-option>
          </el-select>
          <!-- 组织筛选框 -->
          <el-select
            v-if="fromPage === 'home' || isDry"
            v-model="dataParam.orgId"
            placeholder="请选择"
            class="li_organ li_item"
            size="small"
            @change="getData()">
            <el-option
              v-for="item in organOption"
              :key="'organ_' + item.orgId"
              :label="item.orgName"
              :value="item.orgId"></el-option>
          </el-select>
          <!-- 搜索框 -->
          <el-input
            v-if="fromPage === 'home' || isDry"
            placeholder="请输入关键字搜索"
            v-model.trim="dataParam.keywords"
            class="li_search li_item"
            size="small"
            clearable
            @keyup.enter.native="getData">
            <el-button slot="append" icon="el-icon-search" size="small" @click.stop="getData"></el-button>
          </el-input>
        </div>
      </div>
    </div>
    <div class="honor_box_main">
      <div v-if="activeName == 'first'" class="box-box">
        <div class="module-con" v-if="honorList.length">
          <div class="con-item" v-for="(honor, index) in honorList" :key="index">
            <div class="item-left">
              <el-avatar
                slot="reference"
                class="user-icon"
                :src="honor.headUrl"
                size="large"
                v-if="honor && honor.headUrl"></el-avatar>
              <el-avatar
                slot="reference"
                class="user-icon"
                :src="honor.gender === '女' ? circleUrlW : circleUrlM"
                size="large"
                v-else></el-avatar>
            </div>
            <div class="item-right">
              <div class="right-top">
                <span class="user-name">{{ honor.userName }}</span>
                <span class="org-name">{{ honor.organName }}</span>
              </div>
              <div class="right-bottom">
                {{ getDesc(honor.busType, honor.grainDate) }}
                <span class="merits_honor_one_result">{{ honor.honorLevel }}</span>
              </div>
            </div>
            <div class="item-img">
              <img :src="getImg(honor.honorLevel)" alt="" />
            </div>
          </div>
        </div>
        <Empty v-else />
      </div>
      <div v-else-if="activeName == 'second'" class="box-box">
        <div v-if="windowList.length">
          <div class="depart_title">优秀大厅窗口</div>
          <div class="module-con">
            <div class="con-item" v-for="(honor, index) in windowList" :key="index">
              <div class="item-left">
                <el-avatar
                  slot="reference"
                  class="user-icon"
                  :src="honor.headUrl"
                  size="large"
                  v-if="honor && honor.headUrl"></el-avatar>
                <el-avatar
                  slot="reference"
                  class="user-icon"
                  :src="honor.gender === '女' ? circleUrlW : circleUrlM"
                  size="large"
                  v-else></el-avatar>
              </div>
              <div class="item-right">
                <div class="right-top">
                  <span class="user-name">{{ honor.userName }}</span>
                  <span class="org-name">{{ honor.organName }}</span>
                </div>
                <div class="right-bottom">
                  {{ getDesc(honor.busType, honor.grainDate) }}
                  <span class="merits_honor_one_result">{{ honor.honorLevel }}</span>
                </div>
              </div>
              <div class="item-img">
                <img :src="getImg(honor.honorLevel)" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div v-if="departmentList.length">
          <div class="depart_title">优秀机关科室（部门）</div>
          <div class="module-con">
            <div class="con-item" v-for="(honor, index) in departmentList" :key="index">
              <div class="item-left">
                <el-avatar
                  slot="reference"
                  class="user-icon"
                  :src="honor.headUrl"
                  size="large"
                  v-if="honor && honor.headUrl"></el-avatar>
                <el-avatar
                  slot="reference"
                  class="user-icon"
                  :src="honor.gender === '女' ? circleUrlW : circleUrlM"
                  size="large"
                  v-else></el-avatar>
              </div>
              <div class="item-right">
                <div class="right-top">
                  <span class="user-name">{{ honor.userName }}</span>
                  <span class="org-name">{{ honor.organName }}</span>
                </div>
                <div class="right-bottom">
                  {{ getDesc(honor.busType, honor.grainDate) }}
                  <span class="merits_honor_one_result">{{ honor.honorLevel }}</span>
                </div>
              </div>
              <div class="item-img">
                <img :src="getImg(honor.honorLevel)" alt="" />
              </div>
            </div>
          </div>
        </div>
        <Empty v-if="windowList.length == 0 && departmentList.length == 0" />
      </div>
    </div>
  </div>
</template>

<script>
import {
  selectListHonorRollDetailResponse,
  selectAllChoose,
  getHonorOrgList,
  orgGetHonorRollData,
  dryGetHonorRollData,
} from '@apis/merits.js'
export default {
  components: {},
  data() {
    return {
      fromPage: '', // home-点击首页绩效榜模块进入，是组织部的点击进入
      activeName: 'first',
      quarterOption: [],
      honorList: [],
      windowList: [],
      departmentList: [],
      itemOne: {},
      organOption: [],
      dataParam: {
        grainDate: 4,
        year: '2021',
        keywords: '',
        orgId: '',
      },
      isDry: false, // 是不是县干部
      circleUrlM: require('@images/user-icon.png'),
      circleUrlW: require('@images/user-icon-G.png'),
      levelImgList: [
        require('@images/home/mertis-hao.png'),
        require('@images/home/mertis-jhao.png'),
        require('@images/home/mertis-yban.png'),
        require('@images/home/mertis-cha.png'),
      ],
      levelList: ['好', '较好', '一般', '较差'],
    }
  },
  created() {
    this.fromPage = 'home'
    const { uiasRoleList = [] } = JSON.parse(sessionStorage.getItem('PSKH_USERINFO'))
    this.isDry = uiasRoleList.findIndex(item => item.roleCode === 'identity_part_leader') > -1
    this.selectAllChoose()
  },
  methods: {
    // 普通员工获取某季度的公示榜
    generalGetData() {
      selectListHonorRollDetailResponse(this.dataParam).then(res => {
        this.handleApi(res)
      })
    },
    // 组织部获取公示榜数据
    organGetData() {
      orgGetHonorRollData(this.dataParam).then(res => {
        this.handleApi(res)
      })
    },
    // 县干获取公示榜
    dryGetData() {
      dryGetHonorRollData(this.dataParam).then(res => {
        this.handleApi(res)
      })
    },
    /**
     * @function 处理接口数据
     * @param {Object} res 接口返回的数据
     */
    handleApi(res) {
      if (res.status === 200) {
        const { personList = [], windowList = [], departmentList = [] } = res.data || {}
        this.honorList = personList
        this.departmentList = departmentList
        this.windowList = windowList
      }
    },
    // 切换季度列表
    changeQuater() {
      this.dataParam.grainDate = this.itemOne.grainDate
      this.dataParam.year = this.itemOne.year
      if (this.fromPage === 'home' || this.isDry) {
        this.getOrganChoose()
      }
      this.getData()
    },
    // 获取季度下拉框数据
    selectAllChoose() {
      selectAllChoose({}).then(res => {
        const { data = [] } = res
        this.quarterOption = data
        if (data.length) {
          this.itemOne = res.data[0]
          this.dataParam.grainDate = res.data[0].grainDate
          this.dataParam.year = res.data[0].year
          if (this.fromPage === 'home' || this.isDry) {
            this.getOrganChoose()
          }
          this.getData()
        }
      })
    },
    // 县干部获取组织下拉框（包含非领导成员才展示）
    async getOrganChoose() {
      const param = {
        quarter: this.dataParam.grainDate,
        type: this.fromPage === 'home' ? 1 : this.isDry ? 2 : 0, // 1-组织部，2-县干部
        year: this.dataParam.year,
      }
      const { data = [] } = await getHonorOrgList(param)
      if (data.length) {
        data.unshift({
          orgId: '',
          orgName: '全部',
        })
        this.organOption = data
        this.dataParam.orgId = this.organOption[0].orgId
      }
    },
    // 根据不同权限展示不同的公示榜
    getData() {
      // 先判断是不是从绩效榜模块进来的
      if (this.fromPage === 'home') {
        this.organGetData()
      } else if (this.isDry) {
        // 判断用户是不是县干
        this.dryGetData()
      } else {
        this.generalGetData()
      }
    },
    getDesc(busType, organId) {
      let desc = busType === '1' ? '个人' : '组织'
      const organ = {
        1: '第一季度',
        2: '第二季度',
        3: '第三季度',
        4: '第四季度',
      }
      desc += `${organ[organId]}考核结果：`
      return desc
    },
    getImg(level) {
      const idx = this.levelList.findIndex(item => {
        return item === level
      })
      return this.levelImgList[idx]
    },
  },
}
</script>

<style lang="scss" scoped>
.honor_box {
  // width: 90%;
  // max-width: 1024px;
  height: 100%;
  padding: 0 20px;
  font-size: 16px;
  position: relative;
  .title_box {
    height: 56px;
    position: absolute;
    right: 0;
    top: -56px;
    /deep/.el-tabs__header {
      margin: 0;
      padding: 0 10px;

      .el-tabs__nav-next,
      .el-tabs__nav-prev {
        line-height: 52px;
      }
    }
    /deep/.el-tabs__nav {
      display: flex;
      .el-tabs__active-bar {
        background-color: #c11f37;
      }
      .el-tabs__item.is-active {
        color: #c11f37;
      }
      .el-tabs__item {
        height: 52px;
        line-height: 52px;
        padding: 0 10px;
        &:hover {
          color: #c11f37;
        }
      }
    }
    .honor_box_main_select {
      width: 100%;
      // margin-bottom: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .li_quarter,
      .li_organ {
        width: 240px;
      }
      .li_search {
        width: 300px;
      }
      .li_item {
        margin-right: 25px;
        &:last-of-type {
          margin-right: 0;
        }
      }
      .li_honor_num {
        color: #333;
        font-size: 18px;
      }
    }
  }
  .honor_box_main {
    height: calc(100% - 36px);
    overflow: hidden;
    padding: 0 10px;
    .box-box {
      // width: 100%;
      height: 100%;
      overflow-y: auto;
      .module-con {
        margin-top: 15px;
        display: flex;
        flex-wrap: wrap;
        cursor: default;
        .con-item {
          display: flex;
          align-items: center;
          // width: 350px;
          width: 30%;
          height: 72px;
          // margin-right: 15px;
          margin-right: 5%;
          background-color: #eef4fe;
          border-top: 1px solid #2b78f1;
          font-size: 14px;
          line-height: 24px;
          padding: 0 15px;
          position: relative;
          &:nth-child(3n) {
            margin-right: 0;
          }
          &:nth-child(n + 4) {
            margin-top: 15px;
          }
          .item-right {
            margin-left: 20px;
            .user-name {
              font-size: 16px;
              font-weight: bold;
              margin-right: 5px;
            }
          }
          .item-img {
            position: absolute;
            right: 20px;
            top: 0;
          }
        }
      }
    }

    .honor_box_main_one {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      height: 50px;
      line-height: 50px;
      border: 1px solid #797979;
      border-radius: 5px;
      padding: 0 20px;
    }
    .is_brg {
      background-color: #f2f2f2;
    }
    .is_active {
      background-color: #d9001b;
      color: #f59a23;
    }
    .honor_box_main_one_name {
      color: #f59a23;
    }
    .honor_box_main_result {
      font-weight: 600;
    }
    .depart_title {
      margin: 10px 0;
      padding-left: 10px;
      color: #333;
      font-size: 16px;
      font-weight: bold;
      border-left: 3px solid #3171b3;
    }
  }
}
</style>
